<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="text-align: center;margin: 100px;background-color: #aaaa;">
    <canvas id="canv" width="400px" height="400px" style="background-color: gray;"></canvas>
    <script>
        var snake;
        var direction;
        var food;
        var n;
        var box = document.getElementById('canv').getContext('2d');
        function draw(point,color){
            box.fillStyle=color;
            box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
        }
        (function(){ready();}());
        function ready(){
            for(var i=0;i<400;i++){
                draw(i,"#313131");
            }
        snake=[66,65,64];
        direction=1;
        food=344;
        draw(food,"yellow");
        draw(66,"blue");
        draw(65,"blue");
        draw(64,"blue");
        }
        function run(){
            document.getElementById("butn").setAttribute("disabled",true);
            snake.unshift(n=snake[0]+direction);
            if(snake.indexOf(n,1)>0||n<0||n>399||(direction==-1&& n%20==19)||(direction==1&&n%20==0)){
                ready();
                document.getElementById("butn").removeAttribute("disabled");
                return alert("游戏结束");
            }
            draw(n,"blue");
            if(n==food){
                while(snake.indexOf(food=~~(Math.random()*400))>0);
                draw(food,"yellow");
            }
            else{
                draw(snake.pop(),"#313131");
            }
            setTimeout(arguments.callee,200);
        }
        document.onkeydown=function(e){
            if(direction==1||direction==-1){
                if(e.keyCode==38){direction=-20;}
                if(e.keyCode==40){direction=20;}
            }
            if(direction==20||direction==-20){
                if(e.keyCode==39){direction=1;}
                if(e.keyCode==37){direction=-1;}
            }
        }
    </script>
    <div>
        <button id="butn" type="button" onclick="run()">开始游戏</button>
    </div>
</body>
</html>